<template>
  <div class="comlfet flexC">
    <div class="category">
      <div class="flex JustifyContentSB">
        <p class="font_s18 colorF">
          <img class="verticM" style="height: 1.5625rem;padding-right: 1rem;" src="../../assets/img/comprehensive/12.png" alt="" />
          动态监管
        </p>
        <p class="font_s16 Bold subtitle textC cursor" style="color:#84BBFF;" @click="dailyInspect = true">日常巡查</p>
      </div>
      <ul class="flex JustifyContentSA">
        <li class="textC cursor" @click="nianJian = true">
          <p class="font_s24 weightBold Bold ball" style="color: #FEE9CF;">2150</p>
          <p class="font_s16 colorF">年检</p>
        </li>
        <li class="textC cursor" @click="shiDiJianCha = true">
          <p class="font_s24 weightBold Bold ball1" style="color: #BCF1FF">345</p>
          <p class="font_s16 colorF">实地检查</p>
        </li>
        <li class="textC cursor" @click="caiWuShenJi = true">
          <p class="font_s24 weightBold Bold ball2" style="color: #E5FFCD;">11</p>
          <p class="font_s16 colorF">财务审计</p>
        </li>
        <li class="textC cursor" @click="fangTanYueTan = true">
          <p class="font_s24 weightBold Bold ball3" style="color: #B5D6FF;">2</p>
          <p class="font_s16 colorF">访谈约谈</p>
        </li>
      </ul>
    </div>
    <div class="category">
      <div class="flex JustifyContentSB">
        <p class="flex1 font_s18 colorF">
          <img class="verticM" style="height: 1.5625rem;padding-right: 1rem;" src="../../assets/img/comprehensive/12.png" alt="" />
          风险监管
        </p>
        <div class="flex flex1 JustifyContentFE">
          <p class="font_s16 Bold subtitle textC cursor" style="color:#84BBFF; " @click="disposalList = true">处置清单</p>
          <p class="font_s16 Bold subtitle textC cursor" style="color:#84BBFF;" @click="exceptionList = true">异常名录</p>
          <!-- <p style="padding: 0.3125rem;"></p> -->
          <p class="font_s16 Bold subtitle textC cursor" style="color:#84BBFF;" @click="riskmodels = true">风险模型</p>
          <!-- <p style="padding: 0.3125rem;"></p> -->
          <p class="font_s16 Bold subtitle textC cursor" style="color:#84BBFF;" @click="standardView01 = true">标准查看</p>
        </div>
      </div>
      <ul class="flex JustifyContentSA" style="padding-top: 1rem;">
        <li class="textC" @click="riskValuationLevelA = true">
          <div class="square  cursor">
            <p class="font_s36 colorF LH3R">{{rANUM}}</p>
            <p class="font_s16 colorF LH2_5R" style="padding: 0 0.5rem;">风险评估等级A</p>
          </div>
          <p class="font_s18 Bold" style="color:#80AAEA">（正常）</p>
        </li>
        <li class="textC" @click="riskValuationLevelB = true">
          <div class="square1 cursor">
            <p class="font_s36 colorF LH3R">{{rBNUM}}</p>
            <p class="font_s16 colorF LH2_5R" style="padding: 0 0.5rem;">风险评估等级B</p>
          </div>
          <p class="font_s18 Bold" style="color:#80AAEA">（异常名录）</p>
        </li>
        <li class="textC" @click="riskValuationLevelC = true">
          <div class="square2 cursor">
            <p class="font_s36 colorF LH3R">{{rCNUM}}</p>
            <p class="font_s16 colorF LH2_5R" style="padding: 0 0.5rem;">风险评估等级C</p>
          </div>
          <p class="font_s18 Bold" style="color:#80AAEA">（名存实亡）</p>
        </li>
      </ul>
    </div>
    <div class="category">
      <div class="flex JustifyContentSB">
        <p class="flex1 font_s18 colorF">
          <img class="verticM" style="height: 1.5625rem;padding-right: 1rem;" src="../../assets/img/comprehensive/12.png" alt="" />
          信用监管
        </p>
        <div class="flex flex1 JustifyContentFE">
          <!-- <p class="font_s16 Bold subtitle textC" style="color:#84BBFF; " @click="xmodel = true">处置清单</p> -->
          <p style="padding: 0.3125rem;"></p>
          <p class="font_s16 Bold subtitle textC cursor" style="color:#84BBFF;" @click="creditmodel = true">信用模型</p>
          <p style="padding: 0.3125rem;"></p>
          <p class="font_s16 Bold subtitle textC cursor" style="color:#84BBFF;" @click="standardView02 = true">标准查看</p>
        </div>
      </div>
      <ul class="flex JustifyContentSA" style="padding-top: 1rem;">
        <li class="textC" @click="creditValuationLevelA = true">
          <div class="square cursor">
            <p class="font_s36 colorF LH3R">{{ANUM}}</p>
            <p class="font_s16 colorF" style="padding: 0 0.5rem;">
              信用评估等级A
              <br />
              AAA\AA\A
            </p>
          </div>
          <!-- <p class="font_s18 Bold" style="color:#80AAEA">（正常）</p> -->
        </li>
        <li class="textC" @click="creditValuationLevelB = true">
          <div class="square1 cursor">
            <p class="font_s36 colorF LH3R">{{BNUM}}</p>
            <p class="font_s16 colorF" style="padding: 0 0.5rem;">
              信用评估等级B
              <br />
              BBB\BB\B
            </p>
          </div>
          <!-- <p class="font_s18 Bold" style="color:#80AAEA">（异常登陆）</p> -->
        </li>
        <li class="textC" @click="creditValuationLevelC = true">
          <div class="square2 cursor">
            <p class="font_s36 colorF LH3R">{{CNUM}}</p>
            <p class="font_s16 colorF" style="padding: 0 0.5rem;">
              信用评估等级C
              <br />
              CCC\CC\C\D
            </p>
          </div>
          <!-- <p class="font_s18 Bold" style="color:#80AAEA">（名存实亡）</p> -->
        </li>
      </ul>
    </div>
    <div class="category flex1 flexC">
      <div class="flex JustifyContentSB" style="padding-top:0.25rem;">
        <p class="font_s18 colorF">
          <img class="verticM" style="height: 1.5625rem;padding-right: 1rem;" src="../../assets/img/comprehensive/12.png" alt="" />
          分类监管
        </p>
        <div class="flex flex1 JustifyContentFE">
          <p class="font_s16 Bold subtitle textC cursor" style="color:#84BBFF;" @click="classifyModel = true">分类模型</p>
          <p style="padding: 0.3125rem;"></p>
          <p class="font_s16 Bold subtitle textC cursor" style="color:#84BBFF;" @click="regulatoryFrequency = true">监管频次</p>
        </div>
      </div>
      <div class="flex1 fljgbj"></div>
    </div>
    <!------------- 组件调用 -------------->
    <ModalBlue v-if="riskValuationLevelA" @hidden="hiddenModalBlue(riskValuationLevelA)">
      <RiskValuationLevelA></RiskValuationLevelA>
    </ModalBlue>
    <ModalBlue v-if="riskValuationLevelB" @hidden="hiddenModalBlue(riskValuationLevelB)">
      <RiskValuationLevelB></RiskValuationLevelB>
    </ModalBlue>
    <ModalBlue v-if="riskValuationLevelC" @hidden="hiddenModalBlue(riskValuationLevelC)">
      <RiskValuationLevelC></RiskValuationLevelC>
    </ModalBlue>
    <ModalBlue v-if="creditValuationLevelA" @hidden="hiddenModalBlue(creditValuationLevelA)">
      <CreditValuationLevelA></CreditValuationLevelA>
    </ModalBlue>
    <ModalBlue v-if="creditValuationLevelB" @hidden="hiddenModalBlue(creditValuationLevelB)">
      <CreditValuationLevelB></CreditValuationLevelB>
    </ModalBlue>
    <ModalBlue v-if="creditValuationLevelC" @hidden="hiddenModalBlue(creditValuationLevelC)">
      <CreditValuationLevelC></CreditValuationLevelC>
    </ModalBlue>
    <ModalBlue v-if="fangTanYueTan" @hidden="hiddenModalBlue(fangTanYueTan)">
      <FangTanYueTan></FangTanYueTan>
    </ModalBlue>
    <ModalBlue v-if="caiWuShenJi" @hidden="hiddenModalBlue(caiWuShenJi)">
      <CaiWuShenJi></CaiWuShenJi>
    </ModalBlue>
    <ModalBlue v-if="shiDiJianCha" @hidden="hiddenModalBlue(shiDiJianCha)">
      <ShiDiJianCha></ShiDiJianCha>
    </ModalBlue>
    <ModalBlue v-if="nianJian" @hidden="hiddenModalBlue(nianJian)">
      <NianJian></NianJian>
    </ModalBlue>
    <ModalPolygon v-if="disposalList" @hidden="hiddenModalPolygon(disposalList)" title="处置清单">
      <DisposalList></DisposalList>
    </ModalPolygon>
    <ModalPolygon v-if="standardView01" @hidden="hiddenModalPolygon(standardView01)" title="浦东新区社会组织协同监管数据大平台风险标准">
      <StandardView01></StandardView01>
    </ModalPolygon>
    <ModalPolygon v-if="standardView02" @hidden="hiddenModalPolygon(standardView02)" title="浦东新区社会组织协同监管数据大平台信用标准">
      <StandardView02></StandardView02>
    </ModalPolygon>
    <ModalPolygon v-if="classifyModel" @hidden="hiddenModalPolygon(classifyModel)" title="分类模型">
      <ClassifyModel></ClassifyModel>
    </ModalPolygon>
    <!-- 监管频次 -->
    <Modal v-if="regulatoryFrequency" @hidden="hiddenModal(regulatoryFrequency)">
      <RegulatoryFrequency></RegulatoryFrequency>
    </Modal>
    <!-- 日常巡查 -->
    <ModalRectangle v-if="dailyInspect" @hidden="hiddenModalRect(dailyInspect)" title="日常巡查工作">
      <DailyInspect></DailyInspect>
    </ModalRectangle>
    <!-- 异常名录 -->
    <ModalPolygon v-if="exceptionList" @hidden="hiddenModalPolygon(exceptionList)" title="列入活动异常名录社会组织管理流程">
      <div style="width: 92%; height: 90%; margin: 0 auto;">
        <img src="../../assets/img/comprehensive/left/03.png" alt="" style="width: 100%; height: 100%;" />
      </div>
    </ModalPolygon>
    <!-- 风险模型 -->
    <ModalRectangle v-if="riskmodels" @hidden="hiddenModalRect(riskmodels)" title="风险模型">
      <RiskModal></RiskModal>
    </ModalRectangle>
     <!-- 信用模型 -->
    <ModalRectangle v-if="creditmodel" @hidden="hiddenModalRect(creditmodel)" title="信用模型">
      <CreditModal></CreditModal>
    </ModalRectangle>
  </div>
</template>
<script>
import Modal from '@/components/Modal.vue'
import ModalPolygon from '@/components/ModalPolygon.vue'
import ModalBlue from '@/components/ModalBlue'
import ModalRectangle from '@/components/ModalRectangle'
import RiskValuationLevelA from './left/RiskValuationLevelA.vue'
import RiskValuationLevelB from './left/RiskValuationLevelB.vue'
import RiskValuationLevelC from './left/RiskValuationLevelC.vue'
import CreditValuationLevelA from './left/CreditValuationLevelA.vue'
import CreditValuationLevelB from './left/CreditValuationLevelB.vue'
import CreditValuationLevelC from './left/CreditValuationLevelC.vue'
import FangTanYueTan from './left/FangTanYueTan.vue'
import CaiWuShenJi from './left/CaiWuShenJi.vue'
import ShiDiJianCha from './left/ShiDiJianCha.vue'
import NianJian from './left/NianJian'
import DisposalList from './left/DisposalList.vue'
import StandardView01 from './left/StandardView01.vue'
import StandardView02 from './left/StandardView02.vue'
import ClassifyModel from './left/ClassifyModel.vue'
import RegulatoryFrequency from './left/RegulatoryFrequency.vue'
import DailyInspect from './left/DailyInspect.vue'
import RiskModal from './left/RiskModal.vue'
import CreditModal from './left/CreditModal.vue'
import { getCreditRegulation, getRiskBasedRegulation } from '@/api/home'

export default {
  name: 'ComLfet',
  components: {
    Modal,
    ModalPolygon,
    ModalBlue,
    ModalRectangle,
    RiskValuationLevelA,
    RiskValuationLevelB,
    RiskValuationLevelC,
    CreditValuationLevelA,
    CreditValuationLevelB,
    CreditValuationLevelC,
    FangTanYueTan,
    ShiDiJianCha,
    CaiWuShenJi,
    NianJian,
    StandardView01,
    StandardView02,
    DisposalList,
    RegulatoryFrequency,
    ClassifyModel,
    DailyInspect,
    RiskModal,
    CreditModal
  },
  data () {
    return {
      disposalList: false,
      standardView01: false,
      standardView02: false,
      classifymodel: false,
      classifyModel: false,
      riskValuationLevelA: false,
      riskValuationLevelB: false,
      riskValuationLevelC: false,
      creditValuationLevelA: false,
      creditValuationLevelB: false,
      creditValuationLevelC: false,
      shiDiJianCha: false,
      caiWuShenJi: false,
      fangTanYueTan: false,
      nianJian: false,
      dailyInspect: false,
      regulatoryFrequency: false,
      exceptionList: false,
      riskmodels: false,
      creditmodel: false,
      rexaminemodel: false,
      CNUM: '',
      BNUM: '',
      ANUM: '',
      rCNUM: '',
      rBNUM: '',
      rANUM: ''
    }
  },
  mounted () {
    getCreditRegulation().then((data) => {
      if (data.success && data.data) {
        this.ANUM = data.data.ANUM
        this.BNUM = data.data.BNUM
        this.CNUM = data.data.CNUM
      }
    })
    getRiskBasedRegulation().then((data) => {
      if (data.success && data.data) {
        this.rANUM = data.data.ANUM
        this.rBNUM = data.data.BNUM
        this.rCNUM = data.data.CNUM
      }
    })
  },
  methods: {
    hiddenModal (choose) {
      if (choose === this.regulatoryFrequency) {
        this.regulatoryFrequency = false
      }
    },
    hiddenModalBlue (choose) {
      if (choose === this.nianJian) {
        this.nianJian = false
      }
      if (choose === this.riskValuationLevelA) {
        this.riskValuationLevelA = false
      }
      if (choose === this.riskValuationLevelB) {
        this.riskValuationLevelB = false
      }
      if (choose === this.riskValuationLevelC) {
        this.riskValuationLevelC = false
      }
      if (choose === this.creditValuationLevelA) {
        this.creditValuationLevelA = false
      }
      if (choose === this.creditValuationLevelB) {
        this.creditValuationLevelB = false
      }
      if (choose === this.creditValuationLevelC) {
        this.creditValuationLevelC = false
      }
      if (choose === this.fangTanYueTan) {
        this.fangTanYueTan = false
      }
      if (choose === this.caiWuShenJi) {
        this.caiWuShenJi = false
      }
      if (choose === this.shiDiJianCha) {
        this.shiDiJianCha = false
      }
    },
    hiddenModalPolygon (choose) {
      if (choose === this.disposalList) {
        this.disposalList = false
      }
      if (choose === this.standardView01) {
        this.standardView01 = false
      }
      if (choose === this.standardView02) {
        this.standardView02 = false
      }
      if (choose === this.classifyModel) {
        this.classifyModel = false
      }
      if (choose === this.exceptionList) {
        this.exceptionList = false
      }
    },
    hiddenModalRect (choose) {
      if (choose === this.dailyInspect) {
        this.dailyInspect = false
      }
      if (choose === this.riskmodels) {
        this.riskmodels = false
      }
      if (choose === this.creditmodel) {
        this.creditmodel = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.comlfet {
  position: absolute;
  top: 15%;
  left: 1rem;
  height: 80%;
  width: 25%;
  .category {
    padding: 0.85rem 1rem;
    background: url(../../assets/img/comprehensive/11.png) no-repeat;
    background-size: 100% 100%;
    .subtitle {
      line-height: 1.5625rem;
      width: 4.75rem;
      height: 1.5625rem;
      border: 1px solid rgba(90, 161, 248, 1);
      border-radius: 13px;
    }
    .ball,
    .ball1,
    .ball2,
    .ball3 {
      width: 5.625rem;
      height: 5.625rem;
      line-height: 5.625rem;
    }
    .ball {
      background: url(../../assets/img/comprehensive/13.png) no-repeat;
      background-size: 100% 100%;
    }
    .ball1 {
      background: url(../../assets/img/comprehensive/14.png) no-repeat;
      background-size: 100% 100%;
    }
    .ball2 {
      background: url(../../assets/img/comprehensive/15.png) no-repeat;
      background-size: 100% 100%;
    }
    .ball3 {
      background: url(../../assets/img/comprehensive/16.png) no-repeat;
      background-size: 100% 100%;
    }
    .square {
      background: url(../../assets/img/comprehensive/17.png) no-repeat;
      background-size: 100% 100%;
    }
    .square1 {
      background: url(../../assets/img/comprehensive/18.png) no-repeat;
      background-size: 100% 100%;
    }
    .square2 {
      background: url(../../assets/img/comprehensive/19.png) no-repeat;
      background-size: 100% 100%;
    }
  }
  .fljgbj {
    width: 100%;
    height: 100%;
    background: url(../../assets/img/comprehensive/95.png) no-repeat;
    background-size: 95% 60%;
    background-position: center;
  }
  .bj {
    width: 100%;
    height: 100%;
    background: url(../../assets/img/comprehensive/93.png) no-repeat;
    background-size: 95% 95%;
    background-position: center;
  }
  .bj1 {
    width: 95%;
    height: 95%;
    position: absolute;
    top: 5%;
    left: 2%;
  }
  .bj2 {
    width: 100%;
    height: 100%;
    background: url(../../assets/img/comprehensive/92.png) no-repeat;
    background-size: 90% 95%;
    background-position: center;
  }
  .bj3 {
    width: 90%;
    height: 90%;
    position: absolute;
    top: 5%;
    left: 5%;
  }
}
</style>
